<template>
  <div class="container">
    <div class="main">
      <Search @select="handleSelect" />
      <el-tree
        :props="defaultProps"
        :load="loadNode"
        lazy
        :expand-on-click-node="true"
        accordion
        ref="treeRef"
        node-key="id"
      >
        <span class="custom-tree-node" slot-scope="{ node }">
          <span
            @dblclick="node.data.type === 1 ? appendMessage(node) : () => {}"
            @click="node.data.type === 1 ? handleMessage(node) : () => {}"
          >
            <span class="avatar" v-if="node.data.type === 1">{{
              node.label.substr(-2)
            }}</span>
            <span>{{ node.label }}</span>
          </span>

          <el-button
            class="el-btn"
            v-if="node.data.type === 2 && node.data.sendMsgPermission === true"
            type="text"
            @click="handleMessage(node)"
            ><i class="el-icon-chat-dot-round"></i
          ></el-button>
          <!-- <span class="tree-node"></span> -->
        </span>
      </el-tree>
    </div>
    <div class="main-left">
      <div v-if="isShow" style="position: absolute;width: 100%;">
        <div class="contant-top">
          <div class="avatar">
            {{ node.realName && node.realName.substr(-2) }}
          </div>
          <div class="name">{{ node.realName }}</div>
        </div>
        <div class="contant-bottom">
          <div class="contant-bottom-item">
            <span class="contant-bottom-label">账号：</span>
            <span class="contant-bottom-value">{{ node.username }}</span>
          </div>
          <div class="contant-bottom-item">
            <span class="contant-bottom-label">大赢家id：</span>
            <span class="contant-bottom-value">{{ node.dyjCode }}</span>
          </div>
          <div class="contant-bottom-item">
            <span class="contant-bottom-label">部门：</span>
            <span class="contant-bottom-value">{{ node.departmentName }}</span>
          </div>
          <div class="contant-bottom-item">
            <span class="contant-bottom-label">手机号：</span>
            <span class="contant-bottom-value">{{ node.mobile }}</span>
          </div>
          <div class="contant-bottom-item">
            <span class="contant-bottom-label">邮箱：</span>
            <span class="contant-bottom-value"></span>
          </div>
          <span></span>
        </div>
        <div class="contact-button">
          <lemon-button
            style="background: #3abf8f; color: #fff"
            type="primary"
            @click="appendMessage(node)"
            >发送消息</lemon-button
          >
        </div>
      </div>
      <el-button
        v-show="type == 1"
        type="text"
        icon="el-icon-close"
        @click="handleClose"
        style="left: calc(100% - 40px); bottom: calc(100% - 40px)"
      ></el-button>
    </div>
  </div>
</template>
<script>
import Sidebar from "./Sidebar.vue";
import Search from "./Search.vue";
export default {
  name: "contact",
  props: ["userId", "name", "type",],
  data() {
    return {
      isShow: false,
      active: 1,
      options: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf",
        key: 'id'
      },
      node: {},
      dialogVisible: false,
      input: "",
      textarea: "",
      current_contact: "",
      groupPower: "",
    };
  },
  components: {
    Sidebar,
    Search,
  },

  mounted() {
    // this.handleOrganization();
  },
  watch: {
    nodeKey(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(val);
        });
      }
    },
  },
  methods: {
    refreshTreeNode(data) {
      // 如果传入isParent 为真则刷新父元素，主要是用来重命名，或者复制的时候使用的；刷新当前的节点，一般的情况是添加操作
      data.forEach((item) => {
        let node = this.$refs.treeRef.getNode(item);
        console.log(item)
        console.log(node)
        if(node){
          node.loaded = false;
          node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
        }
        
      });
    },
    dblclick() {},
    //关闭页面
    handleClose() {
      let data = {
        type: 1,
        code: 200,
        data: "false",
      };
      window.parent.postMessage(data, "*");
    },
    handleSelect({ item, type }) {
      item.type = type;
      if (type == 1) {
        this.$emit("private", item);
      } else if (type == 2) {
        item.label = item.name;
        this.$emit("group", item);
      }
    },
    tab(key) {
      this.active = key;
    },
    //发送消息
    async appendMessage(node) {
      this.node.type = this.current_contact.type;
      if (this.node.type === 1) {
        this.$emit("private", this.node);
      } else {
        this.$emit("group", this.current_contact);
      }
      this.dialogVisible = false;
    },
    handleMessage(obj) {
      this.current_contact = obj.data;
      if (obj.data.type === 1) {
        this.isShow = true;
        this.dialogVisible = false;
        this.getLogin(obj.data.id);
      } else {
        this.appendMessage(obj);
        // this.isShow = false;
        // this.dialogVisible = true;
      }
    },
    //获取账号信息
    async getLogin(id) {
      const result = await this.$API.admins.login(id);
      if (result.code === 200) {
        this.node = result.result;
      }
    },
    show() {
      this.isShow = true;
    },
    async loadNode(node, resolve, key) {
      if (node.level === 0) {
        const result = await this.$API.admins.getOrganization(
          "Struc00000",
          this.userId,
          this.name
        );
        if (result.code === 200) {
          return resolve([result.result]);
        } else {
          console.log("数据获取失败: ", result);
        }
      }

      if (node.level > 5 || node.data.type === 1) return;
      const result = await this.$API.admins.getOrganization(
        node.data.id,
        this.userId,
        this.name
      );
      if (result.code === 200) {
        if (!result.result) {
          resolve([]);
          return;
        }
        if (
          node.level === 5 ||
          (result.result.children &&
            result.result.children.length > 0 &&
            result.result.children[0].type === 1)
        ) {
          const ret = result.result.children.map((item) => {
            item.leaf = true;
            return item;
          });
          resolve(ret);
        } else {
          if (result.result.children.length > 0) {
            // 创建一个变量用于返回结果
            let resultArray = new Array();
            for (let i = 0; i < result.result.children.length; i++) {
              if (result.result.children[i].type === 1) {
                const ret = result.result.children[i];
                ret.leaf = true;
                resultArray.push(ret);
              } else {
                resultArray.push(result.result.children[i]);
              }
            }

            // 如果结果array不为空，将结果返回
            if (resultArray.length > 0) {
              resolve(resultArray);
            }
          } else {
            resolve(result.result.children);
          }
        }
      } else {
        console.log("数据获取失败: ", result);
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "../styles/mixin.less";
.lemon-container {
  position: relative;
}
.container {
  display: flex;
  flex-direction: initial;
}
.main {
  .sidebar-msg-fixtop {
    padding: 0 10px;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #fff;
    .el-input__inner {
      background: #f8f8f9;
      border: 1px solid #ebebf2;
      border-radius: 2px;
    }
  }

  /deep/.el-tree-node__content {
    height: 35px;
  }
  .custom-tree-node {
    margin: 5px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    opacity: 1;

    .el-btn {
      opacity: 1;
    }
  }

  // .custom-tree-node:hover{
  //   .el-btn{
  //     opacity: 1;
  //   }
  // }
  /deep/.el-button--text {
    color: #bbb;
    font-size: 20px;
  }
  .avatar {
    width: 32px;
    height: 32px;
    background-image: url(../assets/head.png);
    background-size: 100%;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    line-height: 32px;
    text-align: center;
    margin: 5px 0;
    font-size: 12px;
    margin-right: 5px;
  }

  .el-tree {
    top: -20px;
    height: calc(100% - 60px);
    background: #eee;
    overflow-y: auto;
    width: 250px;
  }
}
.main-left {
  width: 100%;
  position: relative;
  .el-button--text {
    color: #bbb;
    padding-left: 5px;
    padding-right: 5px;
    position: absolute;
    left: 100%;
  }
  .contact-button {
    display: flex;
    justify-content: center;
  }
  .contant-top {
    background-image: url(.././assets/bg.png);
    background-size: 100% 100%;
    height: 200px;
    display: flex;
    align-items: center;

    .avatar {
      border: 1px solid #eee;
      width: 100px;
      height: 100px;
      margin-left: 119px;
      text-align: center;
      line-height: 100px;
      margin-right: 30px;
      color: #fff;
      font-size: 24px;
      white-space: initial;
      background-image: url(../assets/head.png);
    }

    .name {
      font-size: 36px;
      font-weight: 700;
    }
  }
  .contant-bottom {
    display: flex;
    flex-direction: column;
    padding-left: 119px;
    text-align: left;
    margin-top: 64px;
    .contant-bottom-label {
      font-size: 16px;
      color: #999999;
      line-height: 36px;
      display: inline-block;
      width: 95px;
    }
    .contact-button-value {
      color: #333;
    }
  }
  .group {
    /deep/.el-dialog {
      margin-top: 184px !important;
      width: 60%;
      margin-left: 378px;
      height: 50%;
    }
    /deep/.el-dialog__footer {
      text-align: center;
    }
    .fa {
      background: #3abf8f;
    }
  }
}
.main-right {
  width: 240px;
  height: @height;
  position: absolute;
  left: 928px;
  bottom: 0;
  border-radius: 0 5px 5px 0;
  // border: 1px solid #ddd;
  border-left: none;
}

.top {
  display: flex;
  flex-direction: row-reverse;
}
</style>